<template>
	<view class="appointment-container">
		<!-- 背景装饰图片 -->
		<image :src="pageImages.appointment_background" class="background-decoration" mode="aspectFill"></image>
		<view class="background-overlay"></view>

		<!-- 顶部介绍区域 -->
		<view class="intro-section">
			<image :src="pageImages.appointment_intro_image" class="intro-image" mode="aspectFill"></image>
			<view class="intro-content">
				<text class="intro-title">线下预约看货</text>
				<text class="intro-subtitle">专业服务 · 实物体验 · 贴心咨询</text>
			</view>
		</view>

		<!-- 服务优势 -->
		<view class="advantage-section">
			<image :src="pageImages.appointment_advantage_bg" class="section-bg-image" mode="aspectFill"></image>
			<view class="section-title">
				<text class="title-text">服务优势</text>
			</view>
			<view class="advantage-list">
				<view class="advantage-item" v-for="(item, index) in advantageList" :key="index">
					<image :src="item.icon" class="advantage-icon"></image>
					<view class="advantage-content">
						<text class="advantage-name">{{ item.name }}</text>
						<text class="advantage-desc">{{ item.description }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 预约流程 -->
		<view class="process-section">
			<view class="section-title">
				<text class="title-text">预约流程</text>
			</view>
			<view class="process-list">
				<view class="process-item" v-for="(step, index) in processSteps" :key="index">
					<view class="step-number">{{ index + 1 }}</view>
					<view class="step-content">
						<text class="step-title">{{ step.title }}</text>
						<text class="step-desc">{{ step.description }}</text>
					</view>
					<view v-if="index < processSteps.length - 1" class="step-arrow">
						<image :src="pageImages.appointment_arrow_down" class="arrow-icon"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 联系方式 -->
		<view class="contact-section">
			<view class="section-title">
				<text class="title-text">联系预约</text>
			</view>

			<!-- 微信联系 -->
			<view class="contact-card">
				<view class="contact-header">
					<image :src="pageImages.appointment_wechat_icon" class="contact-icon"></image>
					<text class="contact-title">微信预约</text>
				</view>
				<view class="wechat-info">
					<view class="wechat-qr">
						<image :src="wechatQRCode" class="qr-image" mode="aspectFit"></image>
						<text class="qr-tip">长按识别二维码</text>
					</view>
					<view class="wechat-item">
						<text class="wechat-label">微信号：</text>
						<text class="wechat-value" @click="copyWechatId">{{ wechatId }}</text>
						<button class="copy-btn" @click="copyWechatId">复制</button>
					</view>
					<view class="wechat-item">
						<text class="wechat-label">店主：</text>
						<text class="wechat-value">{{ ownerName }}</text>
					</view>
					<text class="contact-note">添加微信时请备注"预约看货"</text>
				</view>
			</view>

		</view>

		<!-- 温馨提示 -->
		<view class="tips-section">
			<view class="section-title">
				<text class="title-text">温馨提示</text>
			</view>
			<view class="tips-content">
				<view class="tip-item" v-for="(tip, index) in tipsList" :key="index">
					<text class="tip-number">{{ index + 1 }}.</text>
					<text class="tip-text">{{ tip }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getPageImages } from '@/utils/imageConfig.js'
import { loadPublicConfigs } from '@/utils/constants.js'
import { convertToHttpsImageUrl } from '@/utils/imageUtils.js'

export default {
	data() {
		return {
			// 页面图片配置
			pageImages: {
				appointment_background: '/static/background.jpg',
				appointment_intro_image: '/static/icons/0.jpg',
				appointment_wechat_icon: '/static/icons/wechat.png',
				appointment_advantage_bg: '/static/icons/e52fec01eaee93ae47cf0ffaf17cf665.jpg',
				appointment_arrow_down: '/static/icons/arrow-down.png'
			},
			// 服务优势
			advantageList: [
				{
					icon: '/static/icons/0.jpg',
					name: '实物体验',
					description: '亲手触摸，真实感受珠宝的质感和工艺',
					iconKey: 'advantage_icon_experience'
				},
				{
					icon: '/static/icons/08ff0bd53a8643cd360e68f761bc2c25.jpg',
					name: '专业咨询',
					description: '资深珠宝顾问一对一专业服务',
					iconKey: 'advantage_icon_consult'
				},
				{
					icon: '/static/icons/3.jpg',
					name: '个性定制',
					description: '现场沟通定制需求，量身打造专属珠宝',
					iconKey: 'advantage_icon_custom'
				},
				{
					icon: '/static/icons/09.webp',
					name: '品质保证',
					description: '所有产品均提供权威证书和质量保障',
					iconKey: 'advantage_icon_quality'
				}
			],
			// 预约流程
			processSteps: [
				{
					title: '添加微信',
					description: '扫描二维码或搜索微信号添加店主微信'
				},
				{
					title: '预约时间',
					description: '与店主沟通确定合适的到店时间'
				},
				{
					title: '到店体验',
					description: '按约定时间到店，享受专业服务'
				},
				{
					title: '满意选购',
					description: '满意后即可选购，不满意无任何压力'
				}
			],
			// 联系信息（待填充具体内容）
			wechatId: 'jewelry_store_2024',
			wechatQRCode: '/static/images/wechat-qr.jpg',
			ownerName: '珠宝顾问小李',
			// 温馨提示
			tipsList: [
				'建议提前1-2天预约，确保有充足的服务时间',
				'到店时请出示预约信息，享受VIP专属服务',
				'如需定制服务，建议预留更多沟通时间',
				'所有产品均可提供权威鉴定证书',
				'支持多种支付方式，购买更便捷'
			]
		}
	},
	async onLoad() {
		await this.initPageData();
		await this.loadPageImages();
		await this.loadContactConfig();
	},
	methods: {
		// 初始化页面数据
		initPageData() {
			console.log('预约页面初始化完成');
		},

		// 加载页面图片配置
		async loadPageImages() {
			try {
				// 获取预约页面的所有图片配置
				const images = await getPageImages('appointment');

				// 更新页面图片
				if (images.appointment_background) {
					this.pageImages.appointment_background = images.appointment_background.url;
				}
				if (images.appointment_intro_image) {
					this.pageImages.appointment_intro_image = images.appointment_intro_image.url;
				}
				if (images.appointment_wechat_icon) {
					this.pageImages.appointment_wechat_icon = images.appointment_wechat_icon.url;
				}

				if (images.appointment_advantage_bg) {
					this.pageImages.appointment_advantage_bg = images.appointment_advantage_bg.url;
				}
				if (images.appointment_arrow_down) {
					this.pageImages.appointment_arrow_down = images.appointment_arrow_down.url;
				}

				// 更新优势图标
				for (let i = 0; i < this.advantageList.length; i++) {
					const advantage = this.advantageList[i];
					if (advantage.iconKey && images[advantage.iconKey]) {
						this.advantageList[i].icon = images[advantage.iconKey].url;
					}
				}

				console.log('预约页面图片配置加载完成');
			} catch (error) {
				console.warn('加载页面图片配置失败，使用默认图片:', error);
			}
		},

		// 加载联系配置
		async loadContactConfig() {
			try {
				const configs = await loadPublicConfigs();

				// 更新微信相关信息
				this.wechatId = configs.wechatId;
				// 使用图片URL转换工具处理二维码地址
				this.wechatQRCode = convertToHttpsImageUrl(configs.wechatQRCode);

				console.log('联系配置加载完成:', configs);
				console.log('转换后的二维码URL:', this.wechatQRCode);
			} catch (error) {
				console.warn('加载联系配置失败，使用默认配置:', error);
			}
		},

		// 复制微信号
		copyWechatId() {
			uni.setClipboardData({
				data: this.wechatId,
				success: () => {
					uni.showToast({
						title: '微信号已复制',
						icon: 'success'
					});
				}
			});
		},
		

		
		// 更新联系信息
		updateContactInfo(info) {
			this.wechatId = info.wechatId || this.wechatId;
			this.ownerName = info.ownerName || this.ownerName;
		}
	}
}
</script>

<style scoped>
.appointment-container {
	background: linear-gradient(135deg, #f5f1e8 0%, #ede4d3 50%, #e8dcc6 100%);
	min-height: 100vh;
	position: relative;
}

/* 背景装饰 */
.background-decoration {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1;
	opacity: 0.1;
}

.background-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: linear-gradient(135deg,
		rgba(212, 175, 55, 0.05) 0%,
		rgba(255, 255, 255, 0.3) 50%,
		rgba(212, 175, 55, 0.05) 100%);
	z-index: 2;
}

/* 顶部介绍区域 */
.intro-section {
	position: relative;
	height: 400rpx;
	overflow: hidden;
	border-radius: 0 0 30rpx 30rpx;
	z-index: 3;
}

.intro-image {
	width: 100%;
	height: 100%;
}

.intro-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
	padding: 60rpx 40rpx 40rpx;
	color: #FFFFFF;
	text-align: center;
}

.intro-title {
	font-size: 48rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
	text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
}

.intro-subtitle {
	font-size: 28rpx;
	opacity: 0.9;
	text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
}

/* 通用区块样式 */
.advantage-section,
.process-section,
.contact-section,
.store-section,
.tips-section {
	background: linear-gradient(135deg,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.9) 100%);
	backdrop-filter: blur(10px);
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(212, 175, 55, 0.15);
	border: 1rpx solid rgba(212, 175, 55, 0.1);
	position: relative;
	z-index: 3;
	overflow: hidden;
}

/* 区块背景图片 */
.section-bg-image {
	position: absolute;
	top: 0;
	right: 0;
	width: 200rpx;
	height: 200rpx;
	opacity: 0.08;
	z-index: -1;
}

/* 标题样式 */
.section-title {
	margin-bottom: 30rpx;
}

.title-text {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

/* 服务优势样式 */
.advantage-list {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.advantage-item {
	display: flex;
	align-items: center;
}

.advantage-icon {
	width: 80rpx;
	height: 80rpx;
	margin-right: 30rpx;
	border-radius: 50%;
	border: 2rpx solid rgba(212, 175, 55, 0.3);
}

.advantage-content {
	flex: 1;
}

.advantage-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	display: block;
	margin-bottom: 10rpx;
}

.advantage-desc {
	font-size: 26rpx;
	color: #666666;
	line-height: 1.6;
}

/* 流程样式 */
.process-list {
	display: flex;
	flex-direction: column;
}

.process-item {
	display: flex;
	align-items: flex-start;
	position: relative;
}

.step-number {
	width: 60rpx;
	height: 60rpx;
	background-color: #D4AF37;
	color: #FFFFFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	font-weight: bold;
	margin-right: 30rpx;
	flex-shrink: 0;
}

.step-content {
	flex: 1;
	padding-bottom: 40rpx;
}

.step-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	display: block;
	margin-bottom: 10rpx;
}

.step-desc {
	font-size: 26rpx;
	color: #666666;
	line-height: 1.6;
}

.step-arrow {
	position: absolute;
	left: 30rpx;
	bottom: 10rpx;
}

.arrow-icon {
	width: 24rpx;
	height: 24rpx;
}

/* 联系卡片样式 */
.contact-card {
	background-color: #FAFAFA;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.contact-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.contact-icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 20rpx;
}

.contact-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

/* 微信信息样式 */
.wechat-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30rpx;
}

.wechat-qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	padding: 20rpx 0;
}

.qr-image {
	width: 220rpx;
	height: 220rpx;
	border-radius: 16rpx;
	margin: 0 auto 15rpx auto;
	box-shadow: 0 4rpx 16rpx rgba(212, 175, 55, 0.2);
	border: 2rpx solid rgba(212, 175, 55, 0.1);
	display: block;
}

.qr-tip {
	font-size: 26rpx;
	color: #999999;
	text-align: center;
	margin-top: 10rpx;
}

.wechat-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 500rpx;
	margin-bottom: 20rpx;
	padding: 0 20rpx;
}

.wechat-label {
	font-size: 28rpx;
	color: #333333;
	min-width: 120rpx;
	text-align: right;
	margin-right: 15rpx;
}

.wechat-value {
	font-size: 28rpx;
	color: #666666;
	flex: 1;
	text-align: left;
}

.copy-btn {
	background-color: #D4AF37;
	color: #FFFFFF;
	border: none;
	border-radius: 20rpx;
	padding: 12rpx 24rpx;
	font-size: 24rpx;
	margin-left: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(212, 175, 55, 0.3);
}

.copy-btn:active {
	transform: scale(0.95);
	opacity: 0.8;
}

.contact-note {
	font-size: 26rpx;
	color: #999999;
	text-align: center;
	width: 100%;
	padding: 15rpx 20rpx;
	background-color: rgba(212, 175, 55, 0.05);
	border-radius: 8rpx;
	border: 1rpx solid rgba(212, 175, 55, 0.1);
}



/* 温馨提示样式 */
.tips-content {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.tip-item {
	display: flex;
	align-items: flex-start;
}

.tip-number {
	font-size: 26rpx;
	color: #D4AF37;
	font-weight: bold;
	margin-right: 10rpx;
	flex-shrink: 0;
}

.tip-text {
	font-size: 26rpx;
	color: #666666;
	line-height: 1.6;
	flex: 1;
}
</style>
